<template>
<div>
  <div class="course">
    <i class="el-icon-s-platform" style="color: #ffcc00;font-size: 20px"></i>
    <span style="font-size: 20px;cursor:pointer;">课程</span>
    <a style="color: darkgrey;font-size: 13px">course</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="color: darkgrey;font-size: 15px">脂肪燃烧</span>
    <el-divider direction="vertical"></el-divider>
    <span style="color: darkgrey;font-size: 15px">腹肌撕裂</span>
    <el-divider direction="vertical"></el-divider>
    <span style="color: darkgrey;font-size: 15px">功能瑜伽</span>
    <el-button style="float: right; padding: 5px 0;color: #ffcc00" type="text">+更多</el-button>
  </div>
  <el-divider></el-divider>
  <el-card class="box-card" v-for="(item,index) in courses" :key="o"
  style="float: left;
  height: 115px;
  width: 200px;
  margin-right: 5px;
  margin-left: 10px;
  margin-bottom: 20px;" body-style="padding:0px">
    <router-link :to="{name:'课程详情',query:{course:JSON.stringify(item)}}">
    <el-image  :src=item.coursephoto style="height: 115px;width: 200px;">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <div  class="text item" id="info">
      <h style="font-size: 20px">{{item.coursename}}</h>
      <p style="font-size: 15px">H{{item.intensity}} {{item.apparatus}}</p>
      <p style="font-size: 15px">{{item.bodypart}}</p>
    </div>
    </router-link>
  </el-card>

</div>
</template>

<script>
export default {
  name: "showcourse",
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      courses:[]
    }
  },
  created() {
    var url = '/course';
    this.$axios.get(url)
      .then( (res)=> {
        //document.write("data is coming", res.data.code);
        if (res.data.code === 200) {
          for(var i=0;i<6;i++) {
            let row = {}; // 定义一个当前添加数据的行
            row.id=res.data.data[i].id;
            row.coursename = res.data.data[i].coursename;
            row.coursebrief = res.data.data[i].coursebrief;
            row.intensity = res.data.data[i].intensity;
            row.apparatus = res.data.data[i].apparatus;
            row.bodypart = res.data.data[i].bodypart;
            row.coursephoto = res.data.data[i].coursephoto;
            row.price = res.data.data[i].price;
            row.audit = res.data.data[i].audit;
            row.stageamount=res.data.data[i].stageamount;
            this.courses.push(row);
          }
          sessionStorage.setItem('courses',JSON.stringify(this.cardInformation));
        }
        else {
          this.$message({message: res.data.msg, type: 'error'})
        }
      }).catch(function (error) {
      console.log(error);
    } );
  }
}
</script>

<style scoped>
span:hover {  color : red ; }
#info{
  position:relative;
  top: -110px;
  left: 10px;
  z-index: 5;
  color: white;
}
.router-link-active {
  text-decoration: none;
  color: #fff;
}
a {
  text-decoration: none;
  color: #fff;
}
</style>
